

{% block content %}

<div id="menu-toolbar" class="ui-state-active _ui-corner-all">
    <ul class ="right">
        <li><span id="id_add_iteration" val="{{project.key.id}}" title="Add new iteration"class="ui-icon_ ui-icon-plusthick_ cursor_pointer">Add Iteration</span></li>
        <li>|</li>
        <li><a href="/admin/project_form?id={{ project.key.id }}" id="id_close_link" class="">Edit</a></li>
    </ul>
    <ul class ="left">
        <li><a href="/project_backlog?id={{project.get_backlog.key.id}}" class="itr_link">{{project.get_backlog.name}}</a></li>
        <li>&raquo;</li>
        <li><a href="/projects" class="itr_link">Projects</a></li>
    </ul>
</div>

<div id ="title-container">
    <h2>{{ project.name }}</h2>
    <span>Description: {{ project.description }}</span>
</div>

<div id="table-contain" class="ui-widget">
<table id="id_iteration_table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header _ui-state-default" >
            <th>Name</th>
            <th>Opened By</th>
            <th>Description</th>
            <th>Start Date</th>
            <th>End Date</th>
        </tr>
    </thead>
    {% for iteration in project.get_iterations %}
    <tbody>
        <tr>
            <td>
                <a href="/?id_it={{ iteration.key.id }}" class="itr_link"> {{ iteration.name|escape }}</a>
            </td>
            <td>{{ iteration.opened_by }}</td>
            <td>{{ iteration.description|escape }}</td>
            <td>{{ iteration.start_date|date:"D, M j, Y" }}</td>
            <td>{{ iteration.end_date|date:"D, M j, Y" }}</td> <!--date:"D, M j, Y \a\t P" -->
        </tr>
    </tbody>
    {% endfor %}
</table>
</div>

<div id="dialog_iteration_form" class="form_container tmp_dialog" title="Create new Iteration">
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $( 'a.itr_link' ).click( function( event ) {
            event.preventDefault();
            var url = $( this ).attr('href');
            loadContent( url );
        });

        calendar = function () {
            $( "#id_start_date, #id_end_date" ).datepicker({
                showOn: "button",
                buttonImage: "/static/css/images/calendar.gif",
                buttonImageOnly: true
            });
        }

        $( "#dialog_iteration_form" ).dialog({
            autoOpen: false,
            height: 350,
            width: 600,
            modal: true,
            buttons: {
                "Save": function() {
                    var $form = $('#dialog_iteration_form form'),
                    url = $form.attr('action'),
                    data = $form.serialize();
                    $.ajax({
                        type: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function(data) {
                            if (data.result == 'ok') {
                                var html = $(data.html).html();
                                $( '#id_iteration_table' ).append(html);
                                $( "#dialog_iteration_form" ).dialog( "close" );
                            } else {
                                var html = $(data.html).html();
                                $( '#dialog_iteration_form' ).empty();
                                $( '#dialog_iteration_form' ).append(html);
                                calendar();
                            }
                        },
                        error: function (data) {
                            showErrorMsg(data);
                        }
                    });
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
            close: function() {
                $( '#dialog_iteration_form' ).empty();
            }
        });
        $( "#id_add_iteration" ).click(function() {
            var id_project = $( this ).attr('val');
            $.ajax({
                type: 'GET',
                url: '/iteration_form',
                dataType: 'json',
                data: {'project_id': id_project},
                success: function(data) {
                    var html = $(data).html();
                    $( '#dialog_iteration_form' ).append(html);
                    calendar();
                },
                error: function (data) {
                    showErrorMsg(data.responseText);
                }
            });
            $( "#dialog_iteration_form" ).dialog( "open" );
        });

    });
</script>

{% endblock %}
